<template>
  <basic-dialog
    width="60%"
    title="关联商品"
    :visible="visible"
    :showClose="false"
  >
    <BasicForm
      class="form_wrap"
      ref="formData"
      formItemWidth="120px"
      :isScalingBtn="false"
      :hasQueryPermission="false"
      :formColumns="formItemList"
      :dataSource="formData"
      :handleSearchForm="handleQueryForm"
      @getFormData="getFormData"
    />
    <BasicTable
      ref="basicTable"
      :dataSource="tableInfo.list"
      :columns="tableInfo.columns"
      :loading="tableInfo.loading"
      :pageSizes="pageSizes"
      :pagination="pagination"
      :tableHeight="tableHeight"
      :selectionSingle="handleSelectionSingle"
      :selectionAll="handleSelectionAll"
      @pageChange="handlePageChange"
      @pageSizeChange="handlePageSizeChange"
    />
    <el-row slot="ft" type="flex" justify="center">
      <el-button type="primary" @click="handleEnsure">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </el-row>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import basePage from '@/mixins/commodity/basePage';
import { LinkGoods } from './LinkGoods';
export default {
  mixins: [basePage],
  components: {
    BasicDialog,
    BasicForm,
    BasicTable
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    tableHeight: {
      type: Number,
      default: 450
    },
    queryTableData: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {
      formItemList: [
        { prop: 'spuNo', label: 'SPU编码', type: 'input' },
        { prop: 'skuNo', label: 'SKU编码', type: 'input' },
        { prop: 'productName', label: '商品名称', type: 'input' },
      ],
      formData: {
        spuNo: '',
        skuNo: '',
        productName: ''
      },
      tableInfo: {
        list: [],
        columns: [
          { title: 'SPU编码', key: 'spuNo' },
          { title: 'SKU编码', key: 'skuNo' },
          { title: '商品名称', key: 'productName' },
          { title: '规格', key: 'specDetail' },
          { title: '计量名称', key: 'unitName' }
        ],
        loading: false
      },
      GoodsLink: new LinkGoods('skuNo')
    }
  },
  watch: {
    visible (val) {
      this.showVisible = val;
      if (val) {
        this.GoodsLink.initPrev();// 存储这次打开弹框时已关联的数据
        this.$nextTick(() => { this.handleQueryForm(); })// nextTick用于解决第一次进入弹框不加载loading的问题
      }
    }
  },
  methods: {
    // 获取表格数据
    async getTableData () {
      const retData = await this.queryTableData(
        this.formData,
        this.pagination,
        state => { this.tableInfo.loading = state; }
      );
      if (retData) {
        this.tableInfo.list = retData.results;
        this.pagination.totalNum = retData.totalNum;
        retData.results.forEach(item => {
          if (this.GoodsLink.has(item.skuNo)) {
            this.$nextTick(() => { this.$refs.basicTable.$refs.elTable.toggleRowSelection(item, true); }); // 勾选回显
          }
        });
      }
    },
    // 表格勾选单独操作
    handleSelectionSingle (selections, row) {
      const isChecked = selections.find(item => item.skuNo === row.skuNo);
      if (isChecked) { // 勾选
        this.GoodsLink.add(row);
      } else { // 取消勾选
        this.GoodsLink.delete(row);
      }
    },
    // 表格勾选全部操作
    handleSelectionAll (selections) {
      const isAllCanceled = selections.length === 0;
      if (isAllCanceled) { // 当前表格全部取消勾选
        this.tableInfo.list.forEach(row => {
          this.GoodsLink.delete(row);
        });
      } else { // 当前表格全部勾选
        selections.forEach(row => {
          this.GoodsLink.add(row)
        });
      }
    },
    // 确定
    handleEnsure () {
      const result = this.GoodsLink.isNull() ? null : this.GoodsLink.getResult();
      this.$emit('getLinkedGoods', result);
      this.clearAllState();
      this.closeDiglog();
    },
    // 取消
    handleCancel () {
      this.GoodsLink.cancel();
      this.clearAllState();
      this.closeDiglog();
    },
    clearAllState () {
      this.pagination = { // 分页状态初始化
        nowPage: 1,
        pageShow: 10,
        totalNum: 0
      }
      this.tableInfo.list = []; // 表格数据初始化
      this.$refs.formData.handleResetForm(); // 搜索条件初始化
    },
    // 关闭弹框
    closeDiglog () {
      this.$emit('update:visible', false);
    }
  }
}
</script>
<style lang="less" scoped>
.form_wrap {
  margin-bottom: 10px;
}
</style>
